<template>
  <!-- 动态值集  值集视图 -->
  <el-input
    readonly
    v-if="
      (props.columnData.fieldTypeCode == 'SELECT_ONE' && props.columnData.lovTypeCode == 'URL') ||
        (props.columnData.fieldTypeCode == 'SELECT_MULTIPLE' && props.columnData.lovTypeCode == 'URL')
    "
    :value="props.itemData[props.columnData.fieldCode + 'NameList']"
    :disabled="props.columnData.disabled"
    placeholder="请选择"
    @click="openLovView(props.columnData.lovCode, props.itemData[props.columnData.fieldCode + 'SelectList'] || [])"
  >
    <template #suffix>
      <el-icon
        v-show="props.itemData[props.columnData.fieldCode]"
        @click.stop="
          () => {
            props.itemData[props.columnData.fieldCode] = []
            props.itemData[props.columnData.fieldCode + 'NameList'] = []
            props.itemData[props.columnData.fieldCode + 'SelectList'] = []
          }
        "
        ><CircleClose
      /></el-icon>
    </template>
  </el-input>
  <lovView ref="lovViewRef" :lovViewCode="lovViewCode" :allSelectList="allSelectList" @lovChange="lovChange"> </lovView>
</template>

<script setup name="VinputNumber">
import { ref, reactive, computed, nextTick } from 'vue'
import { mixinsData } from '../hooks/mixinsData'
import lovView from 'components/lov-view'

const props = defineProps({
  columnData: {
    type: Object,
    default: () => {}
  },
  itemData: {
    type: Object,
    default: () => {}
  },
  rules: {
    type: Object,
    default: () => {}
  }
})

const lovViewRef = ref(null)
const lovViewCode = ref('')
const allSelectList = ref([])
const openLovView = (code, list) => {
  // 接口-服务值集点击 显示值集视图弹板
  allSelectList.value = list
  lovViewCode.value = code
  nextTick(() => {
    lovViewRef.value.showDrawer()
  })
}
// 值集视图
const lovChange = (list, name, key) => {
  let arrList = Array.isArray(list) ? list : [list]
  let keyList = []
  let nameList = []
  arrList.map((item) => {
    keyList.push(item[key])
    nameList.push(item[name])
  })
  props.itemData[props.columnData.fieldCode] = keyList
  props.itemData[props.columnData.fieldCode + 'NameList'] = nameList
  props.itemData[props.columnData.fieldCode + 'SelectList'] = JSON.stringify(arrList)
}
const { handelBlur, handelChange } = mixinsData(props.columnData, props.itemData, props.rules)
</script>
<style lang="scss"></style>
